<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { mapListApi } from "@/api/map";
import flashIcon from '@/assets/flashIcon.png'
import station from '@/assets/station.jpg'

let map = null;
const markerData = ref([]);
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "	8a51b59dc68fdb2cd222c94df8882722",
  };

  AMapLoader.load({
    key: "73124895f510a1335029d5f50e479ead", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 5, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });

      //信息窗体的内容
      const content = [
        "<div><b>高德软件有限公司</b>",
        "电话 : 010-84107000   邮编 : 100102",
        "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div>",
      ];

      //创建 infoWindow 实例
      const infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -45),
      });



      //创建地图标识
      mapListApi().then(({ data }) => {

        markerData.value = data;
        markerData.value.forEach((item) => {
          const marker = new AMap.Marker({
            position: item.position,
            offset: new AMap.Pixel(-10, -10),
            icon: flashIcon, //添加 icon 图标 URL
            title: item.name,
          });

          marker.on("click", () => {
            infoWindow.setContent(`  
            <div style="display: flex; padding: 10px;align-items: center;">
              <div>
                <img src=${station} width="200px">
              </div>
              <div style="width: 180px;line-height: 30px; margin-left: 20px;">
                <div style="font-size: 20px;font-weight: bold;">${item.title}</div>
                <div style="font-size: 16px;">充电桩数量：${item.count}</div>
                <div style="font-size: 16px; color: blue;">充电桩状态：${item.status === 1 ? '使用中' : '维护中'}</div>
              </div>
            </div>
            `);
            //打开信息窗体
            infoWindow.open(map, marker.getPosition());
          });


          marker.setMap(map);
        });
      })
    })
    .catch((e) => {
      console.error("地图加载失败:", e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<style scoped>
#container {
  width: 100%;
  height: 80vh;
}
</style>